<template>
  <view class="cart-container">
    <!-- 顶部导航栏 -->
    <view class="cart-nav">
      <view class="nav-left" @click="navBack">
        <image src="/static/返回.png" mode="widthFix"></image>
      </view>
      <view class="nav-title">我的购物车</view>
      <view class="nav-right">
        <text @click="handleClearAll" class="clear-btn">清空</text>
      </view>
    </view>
	
	<scroll-view scroll-y="true">
		<!-- 购物车商品列表 -->
		<view class="cart-list" v-if="cartList.length > 0">
		  <view class="cart-item" v-for="(item, index) in cartList" :key="item.id">
		    <!-- 选中复选框 -->
		    <view class="item-check">
		      <checkbox 
		        :checked="item.checked" 
		        @change="handleCheckItem(index)"
		        color="#66cc00"
		      />
		    </view>
		    <!-- 商品图片 -->
		    <view class="item-img">
		      <image :src="item.imgUrl" mode="aspectFill"></image>
		    </view>
		    <!-- 商品信息 -->
		    <view class="item-info">
		      <view class="item-name">{{ item.name }}</view>
		      <view class="item-price">¥{{ item.price.toFixed(2) }}</view>
		    </view>
		    <!-- 数量控制 -->
		    <view class="item-count">
		      <view class="count-btn" @click="handleMinus(index)" :disabled="item.count <= 1">-</view>
		      <view class="count-input">{{ item.count }}</view>
		      <view class="count-btn" @click="handlePlus(index)">+</view>
		    </view>
		    <!-- 红色删除按钮 -->
		    <view class="item-delete-red" @click="handleDelete(index)">
		      <text class="delete-text">删除</text>
		    </view>
		  </view>
		</view>
		<!-- 空购物车状态 -->
		<view class="empty-cart" v-else>
		  <image src="/static/购物车空.png" mode="widthFix"></image>
		  <view class="empty-text">购物车空空如也~</view>
		  <view class="empty-btn" @click="goToHome">去逛逛</view>
		</view>
	</scroll-view>

    <!-- 总计+立即支付区域 -->
    <view class="total-bar" v-if="cartList.length > 0">
      <!-- 左侧：总计 -->
      <view class="total-left">
        <text class="total-label">总计：</text>
        <text class="total-price">¥{{ totalPrice.toFixed(2) }}</text>
      </view>
      <!-- 右侧：立即支付 -->
      <view class="pay-right">
        <button class="pay-btn" @click="handlePay">立即支付</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isAllChecked: false,
      totalPrice: 0,
      checkedCount: 0,
      hasCheckedItem: false,
      cartList: [
        {
          id: 1,
          name: '进口红富士苹果',
          
          price: 58,
          count: 2,
          checked: true,
          imgUrl: '/static/板栗.png'
        },
        {
          id: 2,
          name: '阳光玫瑰葡萄',
         
          price: 88,
          count: 1,
          checked: false,
          imgUrl: '/static/板栗.png'
        },
        {
          id: 3,
          name: '进口红富士苹果',
          
          price: 58,
          count: 2,
          checked: true,
          imgUrl: '/static/板栗.png'
        },
        {
          id: 4,
          name: '进口红富士苹果',
          
          price: 58,
          count: 2,
          checked: true,
          imgUrl: '/static/板栗.png'
        },
        {
          id: 5,
          name: '进口红富士苹果',
          
          price: 58,
          count: 2,
          checked: true,
          imgUrl: '/static/板栗.png'
        },
        {
          id: 6,
          name: '进口红富士苹果',
          
          price: 58,
          count: 2,
          checked: true,
          imgUrl: '/static/板栗.png'
        },
      ]
    };
  },
  watch: {
    cartList: {
      deep: true,
      handler() {
        this.calcTotalPrice();
        this.checkAllStatus();
      }
    }
  },
  mounted() {
    this.calcTotalPrice();
    this.checkAllStatus();
  },
  methods: {
    navBack() {
      uni.navigateBack({ delta: 1 });
    },
    handleCheckItem(index) {
      this.cartList[index].checked = !this.cartList[index].checked;
    },
    handleCheckAll() {
      const isChecked = !this.isAllChecked;
      this.cartList.forEach(item => {
        item.checked = isChecked;
      });
    },
    handleMinus(index) {
      if (this.cartList[index].count > 1) {
        this.cartList[index].count--;
      }
    },
    handlePlus(index) {
      this.cartList[index].count++;
    },
    handleDelete(index) {
      uni.showModal({
        title: '删除商品',
        content: '确定要删除该商品吗？',
        confirmColor: '#ff3333',
        success: (res) => {
          if (res.confirm) {
            this.cartList.splice(index, 1);
            uni.showToast({ title: '删除成功', icon: 'none' });
          }
        }
      });
    },
    handleClearAll() {
      if (this.cartList.length === 0) {
        uni.showToast({ title: '购物车已为空', icon: 'none' });
        return;
      }
      uni.showModal({
        title: '清空购物车',
        content: '确定要删除所有商品吗？',
        confirmColor: '#ff3333',
        cancelColor: '#666',
        success: (res) => {
          if (res.confirm) {
            this.cartList = [];
            uni.showToast({ title: '已清空购物车', icon: 'none' });
          }
        }
      });
    },
    calcTotalPrice() {
      let total = 0;
      let count = 0;
      this.cartList.forEach(item => {
        if (item.checked) {
          total += item.price * item.count;
          count++;
        }
      });
      this.totalPrice = total;
      this.checkedCount = count;
      this.hasCheckedItem = count > 0;
    },
    checkAllStatus() {
      const checkedLength = this.cartList.filter(item => item.checked).length;
      this.isAllChecked = checkedLength > 0 && checkedLength === this.cartList.length;
    },
    // 恢复支付方法
    handlePay() {
      if (!this.hasCheckedItem) return;
      const checkedGoods = this.cartList.filter(item => item.checked);
      uni.navigateTo({
        url: `/pages/orderConfirm/orderConfirm?goods=${JSON.stringify(checkedGoods)}`
      });
    },
    goToHome() {
      uni.switchTab({ url: '/pages/index/index' });
    }
  }
};
</script>

<style lang="scss">
.cart-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 100rpx;
  display: flex;
  flex-direction: column;

  scroll-view {
    flex: 1;
    overflow-y: auto;
  }

  // 顶部导航栏
  .cart-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100rpx;
    background-color: #fff;
    padding: 0 20rpx;
    box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
    position: sticky;
    top: 0;
    z-index: 99;

    .nav-left {
      width: 40rpx;
      height: 40rpx;
      image {
        width: 100%;
        height: 100%;
      }
    }

    .nav-title {
      font-size: 32rpx;
      font-weight: 600;
      color: #333;
    }

    .nav-right .clear-btn {
      font-size: 28rpx;
      color: #ff3333;
      font-weight: 500;
    }
  }

  // 购物车列表
  .cart-list {
    padding: 0 20rpx;

    .cart-item {
      display: flex;
      align-items: center;
      background-color: #fff;
      margin-bottom: 20rpx;
      border-radius: 16rpx;
      padding: 20rpx;
      box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.03);

      .item-check {
        width: 40rpx;
        height: 40rpx;
        margin-right: 20rpx;
      }

      .item-img {
        width: 120rpx;
        height: 120rpx;
        border-radius: 12rpx;
        overflow: hidden;
        margin-right: 20rpx;
        image {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }

      .item-info {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;

        .item-name {
          font-size: 26rpx;
          color: #333;
          font-weight: 500;
          margin-bottom: 8rpx;
        }

        .item-spec {
          font-size: 22rpx;
          color: #999;
          margin-bottom: 8rpx;
        }

        .item-price {
          font-size: 28rpx;
          color: #ff3333;
          font-weight: 600;
        }
      }

      .item-count {
        display: flex;
        align-items: center;
        margin: 0 20rpx;

        .count-btn {
          width: 40rpx;
          height: 40rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          border: 1rpx solid #eee;
          border-radius: 8rpx;
          font-size: 28rpx;
          color: #333;
        }

        .count-input {
          width: 60rpx;
          height: 40rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 24rpx;
          color: #333;
          border-top: 1rpx solid #eee;
          border-bottom: 1rpx solid #eee;
        }
      }

      .item-delete-red {
        color: #ff3333;
        font-size: 26rpx;
        font-weight: 500;
      }
    }
  }

  // 总计+立即支付区域（核心布局修改）
  .total-bar {
    position: fixed;
    bottom: 100rpx;
    left: 0;
    right: 0;
    background-color: #fff;
    padding: 20rpx 30rpx;
    box-shadow: 0 -2rpx 10rpx rgba(0,0,0,0.03);
    z-index: 97;
    // 关键：Flex布局，让子元素左右分布
    display: flex;
    align-items: center;
    justify-content: space-between;

    // 左侧总计
    .total-left {
      display: flex;
      align-items: center;

      .total-label {
        font-size: 28rpx;
        color: #666;
        margin-right: 8rpx;
      }

      .total-price {
        font-size: 32rpx;
        color: #ff3333;
        font-weight: 700;
      }
    }

    // 右侧立即支付
    .pay-right {
      .pay-btn {
        width: 160rpx;
        height: 60rpx;
        background-color: #66cc00;
        color: #fff;
        border-radius: 30rpx;
        font-size: 26rpx;
        // 清除默认按钮样式
        border: none;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }

  // 空购物车
  .empty-cart {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 200rpx;

    image {
      width: 200rpx;
      height: 200rpx;
      margin-bottom: 40rpx;
    }

    .empty-text {
      font-size: 28rpx;
      color: #999;
      margin-bottom: 40rpx;
    }

    .empty-btn {
      width: 160rpx;
      height: 60rpx;
      background-color: #66cc00;
      color: #fff;
      border-radius: 30rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 26rpx;
    }
  }
}
</style>